<template>
	<view class="content">
		<view class="header">
			<view class="img flexbetween">
				<view class="flexleft header_left" v-if="!is_login" @click="login">
					<view class="img_as">
						<image src="@/static/images/login/tuoxingjian.png" mode=""></image>
					</view>
					<view class="header_wenzi">
						<view class="name">去登录</view>
					</view>
				</view>
				<view class="flexleft header_left" v-if="is_login">
					<view class="img_a">
						<button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
							<image :src="userInfo.avatar_text" mode=""></image>
						</button>
					</view>
					<view class="header_wenzi" v-if="infoShow">
						<view class="flexleft">
							<view class="name margin_right">
								<input type="nickname" v-model="userInfo.nickname" @blur="onNickName"
									style="width: 300rpx;">
							</view>
							<u-icon name="edit-pen" color="#ffffff" size="32"></u-icon>
						</view>
						<view class="header_ID flexleft" @click="copycontent(userInfo.invite_code)">
							<view class="idtxt">邀请码：{{userInfo.invite_code}}</view>
							<view class="copy">复制</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 我的订单 -->
		<view class="nav">
			<view class="nav_a flexbetween">
				<view class="nav_my">我的订单</view>
				<view class="flexleft" @click="check(0)">
					<view class="look">查看全部订单</view>
					<view class="right_icon"></view>
				</view>
			</view>
			<view class="nav_a flexbetween">
				<view class="fukuan_a" @click="check(1)">
					<image src="@/static/images/my/obligation.png" mode="" class="me_dingdan"></image>
					<view class="">待付款</view>
				</view>
				<view class="fukuan_a" @click="check(2)">
					<image src="@/static/images/my/pending.png" mode="" class="me_dingdan"></image>
					<view class="">待发货</view>
				</view>
				<view class="fukuan_a" @click="check(3)">
					<image src="@/static/images/my/wait.png" mode="" class="me_dingdan"></image>
					<view class="">待收货</view>
				</view>
				<view class="fukuan_a" @click="check(4)">
					<image src="@/static/images/my/shouhou.png" mode="" class="me_dingdan"></image>
					<view class="">售后</view>
				</view>
			</view>
		</view>
		<!-- 余额 -->
		<view class="section flexleft">
			<view class="section_left" @click="tzwdjj(0)">
				<view class="left_img "></view>
				<view class="flexbetween section_center">
					<view class="qian">{{userInfo.money || "0.00"}}</view>
					<view class="yue">余额</view>
				</view>
			</view>
			<view class="section_right" @click="tzwdjj(1)">
				<view class="right_img"></view>
				<view class="flexbetween section_center">
					<view class="qian">{{userInfo.score || 0}}</view>
					<view class="yue">积分</view>
				</view>
			</view>
		</view>
		<!-- 我的团队 -->
		<view class="center">
			<view class="center_a flexbetween" @click="tuiguang">
				<view class="flexleft">
					<!-- <view class="me"></view> -->
					<u-icon name="man-add" color="#333" size="28"></u-icon>
					<view class="title">我的推广</view>
				</view>
				<view class="right_icon"></view>
			</view>
			<view class="center_a flexbetween" @click="jumpfb" v-if="fabuishow">
				<view class="flexleft">
					<!-- <view class="fabu"></view> -->
					<u-icon name="share-square" color="#333" size="28"></u-icon>
					<view class="title">我的发布</view>
				</view>
				<view class="right_icon"></view>
			</view>
			<view class="center_a flexbetween" @click="jumpurl('/pages/mypage/wodejl')">
				<view class="flexleft">
					<u-icon name="file-text" color="#333" size="28"></u-icon>
					<view class="title">我的简历</view>
				</view>
				<view class="right_icon"></view>
			</view>
			<view class="center_a flexbetween" @click="jumpsc" v-if="shoucangishow">
				<view class="flexleft">
					<!-- <view class="shoucang"></view> -->
					<u-icon name="heart" color="#333" size="28"></u-icon>
					<view class="title">我的收藏</view>
				</view>
				<view class="right_icon"></view>
			</view>
			<view class="center_a flexbetween" @click="jumpurl('/pages/mypage/yuelanls')">
				<view class="flexleft">
					<!-- <view class="history"></view> -->
					<u-icon name="clock" color="#333" size="28"></u-icon>
					<view class="title">阅览历史</view>
				</view>
				<view class="right_icon"></view>
			</view>
			<view class="center_a flexbetween" @click="jumpurl('/pages/mypage/guanyuwm?type=1')">
				<view class="flexleft">
					<!-- <view class="lianxi"></view> -->
					<u-icon name="level" color="#333" size="28"></u-icon>
					<view class="title">关于我们</view>
				</view>
				<view class="right_icon"></view>
			</view>
			<view class="center_a flexbetween" @click="show_wu=true">
				<view class="flexleft">
					<!-- <view class="lianxi"></view> -->
					<u-icon name="kefu-ermai" color="#333" size="28"></u-icon>
					<view class="title">联系我们</view>
				</view>
				<view class="right_icon"></view>
			</view>
			<view class="center_a flexbetween" @click="shezhi">
				<view class="flexleft">
					<!-- <view class="shezhi"></view> -->
					<u-icon name="setting" color="#333" size="28"></u-icon>
					<view class="title">设置</view>
				</view>
				<view class="right_icon"></view>
			</view>
		</view>
		<!-- 联系我们-->
		<u-popup :show="show_wu" mode="center" @close="show_wu=false" :round="15">
			<view class="logistics margin_top border">
				<text class="logistics_danhao margin_top">请选择您要联系的方式</text>
				<view class="logistics_zi">我们根据您的选择为您服务</view>
				<view class="flexbetween relation ffffff border">
					<button open-type="contact" class="flexstart" style="margin: 0; padding: 0;">
						<image src="@/static/images/my/wiexin.png" mode="" class="wiexin"></image>
						<view class=" ">
							<view class="wiexin_kefu">微信客服</view>
							<view class="wiexin_fuwu">竭诚为您服务~！</view>
						</view>
					</button>
					<view class="right_icon"></view>
				</view>
				<view style="color: #ff0000;font-size: 24rpx; margin-top:10rpx">
					微信客服在线时间：9:00—21:00
				</view>
				<view class="flexbetween relation ffffff border" @click="phone(dataAll.kf_mobile)">
					<view class="flexstart ">
						<image src="@/static/images/my/phone.png" mode="" class="wiexin"></image>
						<view class="">
							<view class="wiexin_kefu">电话客服</view>
							<view class="wiexin_fuwu">{{dataAll.kf_mobile}}</view>
						</view>
					</view>
					<view class="right_icon"></view>
				</view>
				<view style="color: #ff0000;font-size: 24rpx; margin-top:10rpx">
					电话客服接听时间：9:00—19:00
				</view>
				<view class="look_details" @click="show_wu=false">确定</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				dataAll: {},
				userInfo: {}, //个人信息
				is_login: false, //是否登录
				show: false,
				loshow: false,
				zfshow: false,
				show_wu: false,
				avanteredit: false, //编辑头像信息弹出层
				infoShow: false
			}
		},
		onShow() {
			this.is_login = httpRequest.checkIsLogin();
			if (this.is_login) {
				this.init()
			}
			this.getmsg()
		},
		computed: {
			fabuishow() {
				let Info = this.userInfo
				return Info.zx_num || Info.gx_num || Info.bidding_num || Info.forum_num || Info.zp_num || Info.cc_num ||
					Info.info_num
			},
			shoucangishow() {
				let Info = this.userInfo
				return Info.collect_zx_num || Info.collect_gx_num || Info.collect_bidding_num || Info.collect_zp_num ||
					Info.collect_shop_num || Info.collect_goods_num || Info.collect_cc_num || Info.collect_info_num
			}
		},
		watch: {
			nickname(newval) {
				console.log("nickname改变了，值为：", newval)
			}
		},
		methods: {
			onChooseAvatar(e) {
				this.uploadImageService(e.detail.avatarUrl)
			},
			onNickName(e) {
				this.editinfo(false, e.detail.value)
			},
			uploadImageService(url) {
				let _this = this;
				httpRequest.uploadFile('/api/common/upload', url).then(res => {
					this.editinfo(res.fullurl, false)
				}).catch(err => {});
			},
			editinfo(val1, val2) {
				console.log(this.userInfo.nickname, 9999999)
				let data = {
					nickname: val2,
					avatar: val1,
				}
				if (!val1) {
					delete data.avatar
				}
				if (!val2) {
					delete data.nickname
				}
				httpRequest.request('/api/user/editInfo', 'POST', data, false, false, true).then(res => {
					httpRequest.toast(res.msg);
					if (res.code == 1) {
						this.init()
					}
				}).catch(err => {
					httpRequest.toast(err.msg);
				})
			},
			// 头像点击
			avanterclick() {
				this.avanteredit = true
			},
			getmsg() {
				httpRequest.request('/api/index/getConfigInfo', 'GET', {}, false, false, true).then(res => {
					if (res.code == 1) {
						this.dataAll = res.data
					}
				}).catch(err => {
					httpRequest.toast(err.msg);
				})
			},
			login() {
				uni.navigateTo({
					url: "/pages/login/wiexinhydl"
				})
			},
			init() {
				httpRequest.request('/api/user/index', 'POST', {}, false, false, true).then(res => {
					if (res.code == 1) {
						this.userInfo = res.data
						this.infoShow = true
					}
				}).catch(err => {
					httpRequest.toast(err.msg);
				})
			},
			shezhi() {
				if (!httpRequest.checkIsLogin()) {
					httpRequest.doLogin();
					return false;
				}
				uni.navigateTo({
					url: '/pages/mypage/shezhi'
				})
			},
			tuiguang() {
				if (!httpRequest.checkIsLogin()) {
					httpRequest.doLogin();
					return false;
				}
				uni.navigateTo({
					url: '/pages/mypage/wodetuiguang'
				})
			},
			jumpurl(url) {
				if (url != '/pages/mypage/guanyuwm?type=1') {
					if (!httpRequest.checkIsLogin()) {
						httpRequest.doLogin();
						return false;
					}
				}

				uni.navigateTo({
					url
				})
			},
			phone(p) {
				uni.makePhoneCall({
					phoneNumber: p.toString()
				}).catch((e) => {

				})
			},
			close() {
				this.show = false
				this.show_wu = false

			},
			check(value) {
				if (!httpRequest.checkIsLogin()) {
					httpRequest.doLogin();
					return false;
				}
				uni.navigateTo({
					url: '/pages/mypage/wodedingdan?current=' + value || 0
				})
			},
			// 跳转我的钱包
			// jumpqb() {
			// 	if (!httpRequest.checkIsLogin()) {
			// 		httpRequest.doLogin();
			// 		return false;
			// 	}
			// 	uni.navigateTo({
			// 		url: '/pages/mypage/wodeqb'
			// 	})
			// },
			// 跳转我的余额页面
			tzwdjj(value) {
				if (!httpRequest.checkIsLogin()) {
					httpRequest.doLogin();
					return false;
				}
				uni.navigateTo({
					url: '/pages/mypage/yue?type=' + value
				})
			},
			// 我的发布
			jumpfb() {
				if (!httpRequest.checkIsLogin()) {
					httpRequest.doLogin();
					return false;
				}
				uni.navigateTo({
					url: '/pages/mypage/wodefb'
				})
			},
			// 我的收藏
			jumpsc() {
				if (!httpRequest.checkIsLogin()) {
					httpRequest.doLogin();
					return false;
				}
				uni.navigateTo({
					url: '/pages/mypage/wodesc'
				})
			},
			copycontent(value) {
				uni.setClipboardData({
					data: value, //要被复制的内容
					success: () => {
						//复制成功的回调函数
						httpRequest.toast("复制成功")
					}
				});
			},
		}
	}
</script>

<style scoped lang="scss">
	.popbgc {
		background-color: #fafafa;
	}

	.itembtn {
		border-bottom: 1rpx solid rgba(153, 153, 153, .1);
		// font-weight: bold;
	}

	.wiexin {
		width: 70.8rpx;
		height: 68.8rpx;
	}

	.header_left {
		padding-left: 40rpx;
	}

	.yue {
		font-size: 20rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: RGBA(52, 113, 177, 1);
		z-index: 1;
	}

	.section_center {
		padding: 32rpx 70rpx 30rpx 30rpx;
	}

	.relation {
		padding: 33rpx 40rpx;
		margin-top: 30rpx;
		border-radius: 15rpx 15rpx 15rpx 15rpx;
	}

	.wiexin_fuwu {
		margin-left: 20rpx;
	}

	.wiexin_kefu {
		font-size: 32rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #000000;
		display: flex;
		padding-left: 20rpx;
	}

	.logistics_zi {
		margin-top: 5rpx;
	}

	.look_details {
		border-radius: 51rpx 51rpx;
		padding: 20rpx 0rpx;
		margin: 75rpx 40rpx 0rpx 40rpx;
	}

	.img {
		background-image: url('../../static/images/my/bag.png');
		width: 750rpx;
		height: 440rpx;
		background-size: 100% 100%;
	}

	.jifen {
		height: 28rpx;
		font-size: 20rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: rgba(21, 7, 112, 1);
	}

	.qian {
		font-size: 30rpx;
		font-family: DIN-Bold, DIN;
		font-weight: bold;
		color: #003D7D;
	}

	.section_left {
		background-image: url('/static/images/my/money_left.png');
		width: 337rpx;
		height: 113rpx;
		background-size: 100% 100%;
	}

	.section_right {
		background-image: url('/static/images/my/money_right.png');
		width: 337rpx;
		height: 113rpx;
		background-size: 100% 100%;
		margin-left: 20rpx;
	}

	.left_img {
		background-image: url('/static/images/my/blue_left.png');
		width: 114rpx;
		height: 48rpx;
		background-size: 100% 100%;
		position: absolute;
		left: 230rpx;
		top: 630rpx;
	}

	.right_img {
		background-image: url('/static/images/my/violet_right.png');
		width: 114rpx;
		height: 48rpx;
		background-size: 100% 100%;
		position: absolute;
		left: 590rpx;
		top: 630rpx;
	}

	.section {
		margin-left: 30rpx;
		margin-top: 162rpx;
	}

	.section_a {
		margin-right: 20rpx;
	}

	.fukuan_a {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
	}

	.me_dingdan {
		width: 45rpx;
		height: 47rpx;
		background-size: 100% 100%;
	}

	.nav {
		width: 92%;
		box-sizing: border-box;
		margin: 30rpx;
		padding: 22rpx 35rpx;
		background-color: #fff;
		border-radius: 14rpx 14rpx 14rpx 14rpx;
		position: absolute;
		top: 290rpx;
	}

	.nav_a {
		padding: 22rpx 0rpx 22rpx 0rpx;
	}

	.nav_my {
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #000000;
	}

	.look {
		font-size: 24rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #999999;
		margin-right: 7rpx;
	}

	.content {
		background-color: #fafafa;
		min-height: 100vh;
	}

	.center_a {
		border-bottom: 1rpx solid #fcfcfc;
		border-top: 1rpx solid #fcfcfc;
	}

	.idtxt {
		font-size: 24rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #FFFFFF;
	}

	.header_img {
		width: 100vw;
		height: 454rpx;
		background-size: 100% 100%;
	}

	.img_as {
		border-radius: 50%;
		width: 110rpx;
		height: 110rpx;

		image {
			border-radius: 50% !important;
			width: 110rpx !important;
			height: 110rpx !important;
		}
	}

	.img_a {
		border-radius: 50%;
		width: 110rpx;
		height: 110rpx;

		button {
			border-radius: 50% !important;
			background-color: none;
			line-height: 0;
			box-sizing: border-box;
			padding: 0;

			image {
				border-radius: 50% !important;
				width: 110rpx !important;
				height: 110rpx !important;
			}
		}

	}

	.header_wenzi {
		margin-left: 30rpx;
		color: #fff;
	}

	.name {
		font-size: 36rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #FFFFFF;
	}

	.header_ID {
		margin-top: 20rpx;
		color: #ffff;
	}

	.copy {
		background-color: #fff;
		color: #228DFF;
		padding: 6rpx 23rpx 5rpx 23rpx;
		border-radius: 20rpx;
		margin-left: 20rpx;
		font-size: 22rpx;
	}

	.youjian {
		width: 11rpx;
		height: 20rpx;
		background-size: 100% 100%;
		// background-image: url('../../static/static/youjiantou.png');
		// position: absolute;
		// right: 20rpx;
	}

	.center {
		margin: 30rpx;
		padding: 0 35rpx;
		background-color: #fff;
		border-radius: 14rpx 14rpx 14rpx 14rpx;
	}

	.title {
		margin: 30rpx 20rpx;
	}


	// 
	.logistics {
		text-align: center;
		padding: 30rpx 30rpx 60rpx 30rpx;
		background-color: #fafafa;
	}

	.logistics_danhao {
		padding: 0rpx 80rpx;
		font-size: 40rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #000000;
	}
</style>